<template>
  <div>
    <common-transition></common-transition>
    <el-button @click="onShow">Show</el-button>
    <common-mask :Show="detailShow" @onClose="onClose">
      <p>asadfs sdfsdf sdfsdf sfdsdf sdfsdf </p>
      <p>asadfs sdfsdf sdfsdf sfdsdf sdfsdf </p>
      <p>asadfs sdfsdf sdfsdf sfdsdf sdfsdf </p>
      <p>asadfs sdfsdf sdfsdf sfdsdf sdfsdf </p>
      <p>asadfs sdfsdf sdfsdf sfdsdf sdfsdf </p>
      <p>asadfs sdfsdf sdfsdf sfdsdf sdfsdf </p>
    </common-mask>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailShow: false
    }
  },
  methods: {
    onShow() {
      this.detailShow = true
    },
    onClose() {
      this.detailShow = false
    }
  }
}
</script>


<style>
  /* border 1px */

  .bg-purple:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    content: ' ';
  }

  .bg-purple:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1px solid red;
    content: ' ';
  }

  @media(-webkit-min-device-pixel-ratio: 1.5),
  (min-device-pixel-ratio: 1.5) {
    .bg-purple::before {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7)
    }
    .bg-purple::after {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7)
    }
  }

  @media(-webkit-min-device-pixel-ratio: 2),
  (min-device-pixel-ratio: 2) {
    .bg-purple::before {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5)
    }
    .bg-purple::after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5)
    }
  }
</style>
